<template>
	<jk-dialog
		v-model="showDialog"
		title="订单生产详情"
		width="1000px"
		:append-to-body="false"
		:modal-append-to-body="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div>
			<div ref="box1">
				<el-row :gutter="12" style="margin-bottom: 12px;box-sizing: border-box;display: flex;">
					<el-col :span="24">
						<div class="margin-bottom-4 flex-between-center" style="align-items: flex-end;">
							<el-tag type="primary" effect="plain" class="">
								<span class="el-icon-tickets item-gap"></span>
								<span>订单信息及进度</span>
							</el-tag>
							<div>
								<span class="el-icon-tickets item-gap"></span>
								<span>{{ dataItem.code || '' }}</span>
							</div>
						</div>
						<jk-card style="height: auto;">
							<el-form ref="ruleForm" :model="ruleForm" label-width="90px" :show-message="false">
								<el-row class="flex-start-center-wrap margin-bottom-10">
									<el-col :span="12" class="flex-center" style="flex-direction: column;">
										<jk-progress :stroke-width="14" type="circle" color="#19be6b" :width="100" class="margin-top-10" :percentage="dataItem.productionPercentage || 0"></jk-progress>
										<span style="font-size: 16px;margin-top: 4px;font-weight: 500;">生产进度(细纱)</span>
									</el-col>
									<el-col :span="12" style="flex-direction: column;">
										<div class="flex-center">
											<div class="total-box-item">
												<span class="total-box-item-val">{{ dataItem.orderQty || 0 }}</span>
												<span class="total-box-item-title">订单数量(吨)</span>
											</div>
										</div>
										<div class="flex-center">
											<div class="total-box-item">
												<span class="total-box-item-val">{{ dataItem.completionQty || 0 }}</span>
												<span class="total-box-item-title">细纱已完成量(吨)</span>
											</div>
											<div class="total-box-item">
												<span class="total-box-item-val">{{ dataItem.ltCompletionQty || 0 }}</span>
												<span class="total-box-item-title">自络已完成量(吨)</span>
											</div>
										</div>
									</el-col>
								</el-row>
								<el-row class="flex-start-center-wrap">
									<!--<el-col :span="24">
                                        <el-form-item class="margin-bottom-10" label="客户">
                                            <span class="read-only-2">{{ dataItem.customerName || '无' }}</span>
                                        </el-form-item>
                                    </el-col>-->
									<el-col :span="12">
										<el-form-item class="margin-bottom-10" label="品种">
											<span class="read-only-2">{{ dataItem.productName || '无' }}</span>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item class="margin-bottom-10" label="批号">
											<span class="read-only-2">{{ dataItem.productOrderBatchList && dataItem.productOrderBatchList.length ? dataItem.productOrderBatchList.map(x => x.batchCode).join() : '无' }}</span>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item class="margin-bottom-0" label="销售订单">
											<span class="read-only-2">{{ dataItem.saleOrderCodes }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</jk-card>
					</el-col>
					<!--<el-col :span="12">
                        <div class="flex-between-center">
                            <el-tag type="primary" effect="plain" class="margin-bottom-4">
                                <span class="el-icon-s-data item-gap"></span>
                                <span>工序产量(kg)</span>
                            </el-tag>
                            <div class="flex-start-center">
                                <el-button type="primary" :loading="tableLoading" icon="el-icon-refresh" size="small" circle @click="getProcessListRequest"></el-button>
                            </div>
                        </div>
                        <jk-card style="height: 300px;">
                            <totalYieldTrendChart :chart-data="ruleForm"></totalYieldTrendChart>
                        </jk-card>
					</el-col>-->
				</el-row>
				<div class="flex-between-center margin-bottom-4">
					<el-tag type="primary" effect="plain">
						<span class="el-icon-connection item-gap"></span>
						<span>排产明细</span>
					</el-tag>
					<div class="flex-end-center">
						<el-radio-group v-model="searchParams.state" size="mini" @change="onRadioChange">
							<el-radio-button
								v-for="(item, index) in openStateList"
								:key="index"
								:label="item.id"
							>{{ item.name }}</el-radio-button>
						</el-radio-group>
					</div>
				</div>
			</div>
			<component
				:is="viewType"
				:height="dialogTableHeight - 20"
				:machine-list="tableData"
			></component>
		</div>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        reportProductionOrderTrackingInfo, reportProductionOrderTrackingInfoProductionPlan
    } from '../../../api/production/productionMonitor';
    import jkProgress from '../../jk-components/jk-progress';
    import { openStateList } from '../../../utils/jk/status-option-list';
    import listView from './components/view-type/list-view';
    import cardView from './components/view-type/card-view';
    import timeLineView from './components/view-type/time-line-view';
    import { mathJsAdd, mathJsMul } from '../../../utils/jk/jk-cals';
    import totalYieldTrendChart from './components/totalYieldTrendChart';
    import { spinProcessPage } from '../../../api/technology/process';
    export default {
        props: {
            pageFrom: { // 1:前纺订单跟踪;0: 订单跟踪
                type: Number,
                default: 0
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        components: {
            totalYieldTrendChart,
            timeLineView,
            cardView,
            listView,
            jkProgress
        },
        data() {
            return {
                viewType: 'listView',
                viewList: [
                    { name: '列表', comName: 'listView' },
                    { name: '卡片', comName: 'cardView' },
                    { name: '流程线', comName: 'timeLineView' }
                ],
                openStateList: [
                    { id: 1, states: [0, 1, 2], name: '待开台', color: '#808695' },
                    { id: 2, states: [3], name: '生产中', color: '#0bab5b' },
                    { id: 3, states: [4], name: '已了机', color: '#F95457' }
                ],
                timer: {},
                tableLoading: false,
                showDialog: false,
                ruleForm: {},
                searchParams: {
                    state: 2
                },
                tableData: [],
                smVal: 0
            };
        },
        methods: {
            onRadioChange() {
                this.getMachineList();
            },
            getTlTotalVal(data) {
                let val = 0;
                if (data && data.length) {
                    data.forEach(x => {
                        val = mathJsAdd(val, x.feedstockQty || 0);
                    });
                }
                return val;
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    this.clearTimer();
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getProcessListRequest() {
                return spinProcessPage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.smVal = res.data.res && res.data.res.find(x => x.code.toUpperCase() === 'SM') ? res.data.res.find(x => x.code.toUpperCase() === 'SM').ratio : 0;
                        this.getData();
                    }
                });
            },
            getMachineList() {
                // const ids = this.openStateList.find(x => x.id === this.searchParams.state) ? this.openStateList.find(x => x.id === this.searchParams.state).states : [];
                // this.tableData = this.ruleForm.openPrdNoticeMachineChangeList.filter(x => ids.includes(x.openingState));
                if (this.searchParams.state === 1) {
                    this.tableData = this.ruleForm.waitPrdNoticeMachineChangeList || [];
                } else if (this.searchParams.state === 2) {
                    this.tableData = this.ruleForm.openPrdNoticeMachineChangeList || [];
                } else if (this.searchParams.state === 3) {
                    this.tableData = this.ruleForm.endPrdNoticeMachineChangeList || [];
                }
            },
            getData() {
                this.tableLoading = true;
                const api = this.pageFrom === 1 ? reportProductionOrderTrackingInfoProductionPlan : reportProductionOrderTrackingInfo;
                return api({
                    orderId: this.dataItem.id
                }).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        const resData = res.data.res ? JSON.parse(JSON.stringify(res.data.res)) : {};
                        this.ruleForm = resData;
                    }
                });
            },
            run() {
                /* this.clearTimer();
                this.getProcessListRequest();
                this.timer = setInterval(() => {
                    this.getProcessListRequest();
                }, 1000 * 15);*/
            },
            clearTimer() {
                clearInterval(this.timer);
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.run();
                }
            },
            dataItem: {
                handler(newVal) {
                    this.ruleForm = newVal ? JSON.parse(JSON.stringify(newVal)) : {};
                    this.getMachineList();
                },
                deep: true
            }
        },
        destroyed() {
            this.clearTimer();
        }
    };
</script>
<style scoped lang="scss">
    .total-box-item {
        width: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px 12px;
        background: #f8f8f9;
        border-radius: 6px;
        margin: 5px;
        border: solid 1px #edeff0;
        white-space: nowrap;
        .total-box-item-title {
            font-size: 13px;
            color: #808695;
        }
        .total-box-item-val {
            font-size: 20px;
            color: #515a6e;
        }
    }
</style>
